<template>
	<view class="pageView">
		<u-loading-page :loading="peiListLoading" bg-color="#e8e8e8"></u-loading-page>
		<u-swiper
			:list="banners"
			indicator
			style="position: relative;"
			indicatorActiveColor="#fff"
			:indicatorStyle="{
				bottom: 30
			}"
			autoplay
			circular
			height="231"
		>
		</u-swiper>
		<view class="pageView-titleBlock">
			<u-icon name="arrow-left" color="#fff" @click="handleBack"></u-icon>
			<view class="pageView-titleBlock-title">医院详情</view>
		</view>
		<view class="pageTopBlock">
			<view class="pageTopBlock-block">
				<view class="pageTopBlock-block-top">
					<image :src="infoData.img_url" class="pageTopBlock-block-top-img"></image>
					<view class="pageTopBlock-block-top-right">
						<view class="pageTopBlock-block-top-right-title">{{ infoData.name }}</view>
						<view class="pageTopBlock-block-top-right-content">
							<view class="pageTopBlock-block-top-right-content-left">{{ infoData.level.name }}</view>
							<image class="pageTopBlock-block-top-right-content-img" src="https://bucketoss10086.oss-cn-beijing.aliyuncs.com/images/local.png"></image>
							<view class="pageTopBlock-block-top-right-content-right" v-if="infoData && infoData.juli">{{ (Number(infoData.juli) / 1000).toFixed(2) }}km</view>
						</view>
					</view>
				</view>
				<view class="pageTopBlock-block-middle">
					<view class="pageTopBlock-block-middle-left">
						<image src="https://bucketoss10086.oss-cn-beijing.aliyuncs.com/images/local.png" class="pageTopBlock-block-middle-left-img"></image>
						<view class="pageTopBlock-block-middle-left-title">{{ infoData.address }}</view>
					</view>
					<view class="pageTopBlock-block-middle-right" @click="handleDao">
						<image src="https://bucketoss10086.oss-cn-beijing.aliyuncs.com/images/gps.png" class="pageTopBlock-block-middle-right-top"></image>
						<view class="pageTopBlock-block-middle-right-content">导航</view>
					</view>
				</view>
				<view class="pageTopBlock-block-bottom" @click="handleHospitalDetail">
					<view class="pageTopBlock-block-bottom-left">
						<view class="pageTopBlock-block-bottom-left-left">医院简介：</view>
						<view class="pageTopBlock-block-bottom-left-right">{{ infoData.jianjie_info }}</view>
					</view>
					<view class="pageTopBlock-block-bottom-right">
						<u-icon name="arrow-right" size="10"></u-icon>
					</view>
				</view>
			</view>
		</view>
		<view class="serveBlock">
			<view class="serveBlock-block" scroll-top="true">
				<view class="serveBlock-block-tab">
					<u-tabs
						:list="tabList"
						:current="current"
						lineWidth="40"
						:lineColor="`url(${lineBg}) 100% 100%`"
						:activeStyle="{
							fontFamily: 'Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20',
							fontWeight: 'normal',
							fontSize: '36rpx',
							color: '#333333'
						}"
						:inactiveStyle="{
							color: '#606266'
						}"
					></u-tabs>
				</view>
				<scroll-view
				  scroll-y="true"
					style="width: 630rpx;height: 50vh;padding-left: 32rpx;padding-right: 32rpx;"
					@scrolltolower="handleScrolltolower"
				>
					<view
						class="serveBlock-block-item"
						v-for="(item, index) in dataList"
						:key="index"
						@click="handleProductDetail(item)"
					>
						<image :src="item.img_url" class="serveBlock-block-item-img"></image>
						<view class="serveBlock-block-item-middle">
							<view class="serveBlock-block-item-middle-title">{{ item.name }}</view>
							<view class="serveBlock-block-item-middle-content">{{ item.intro }}</view>
							<view class="serveBlock-block-item-middle-priceBlock">
								<text class="serveBlock-block-item-middle-priceBlock-type">¥</text>
								<text class="serveBlock-block-item-middle-priceBlock-num">{{ item.price }}</text>
								<text class="serveBlock-block-item-middle-priceBlock-unit">元/次</text>
							</view>
						</view>
						<button class="serveBlock-block-item-button" @click.stop="handleCreateOrder(item)">预约</button>
					</view>
				</scroll-view>
				<view class="serveBlock-block-font" v-if="showMore">暂无更多～</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { getHospitalInfo, getPzServiceList } from '@/api/common.js'
	export default {
		data() {
			return {
				banners: [
					'https://bucketoss10086.oss-cn-beijing.aliyuncs.com/images/pei.png',
					'https://bucketoss10086.oss-cn-beijing.aliyuncs.com/images/pei.png',
					'https://bucketoss10086.oss-cn-beijing.aliyuncs.com/images/pei.png'
				],
				tabList: [{
					name: '服务列表'
				}],
				current: 0,
				page: 1,
				showMore: false,
				lastPage: 0,
				infoData: null,
				peiListLoading: false,
				lineBg: 'https://bucketoss10086.oss-cn-beijing.aliyuncs.com/images/borderImg.png',
				dataList: [
					{
						title: '2小时陪诊',
						content: '全程陪诊，诊前指导；长期协助陪诊',
						price: '128'
					},
					{
						title: '半天陪诊4小时',
						content: '全程陪诊，诊前指导；长期协助陪诊',
						price: '198'
					},
					{
						title: '全天陪诊8小时',
						content: '全程陪诊，诊前指导；长期协助陪诊',
						price: '298'
					},
					{
						title: '夜间陪诊4小时',
						content: '全程陪诊，诊前指导；长期协助陪诊',
						price: '398'
					}
				]
			}
		},
		onShow() {
			this.dataList = []
			this.page = 1
			this.getHospitlInfoData()
		},
		methods: {
			handleCreateOrder(item) {
				uni.setStorageSync('productDetail', {
					url: '/pages/peiDetail/peiDetail',
					...item
				})
				uni.navigateTo({
					url:'/pages/createOrder/createOrder'
				})
			},
			getHospitlInfoData() {
				this.peiListLoading = true
				getHospitalInfo({
					id: uni.getStorageSync('hospitalListItem').id,
					lat: 0,
					lng: 0
				}).then(res => {
					const { code, data } = res
					if (code == 200001) {
						this.infoData = data
					}
					this.getList()
				})
				.catch(e => {
					this.peiListLoading = false
				})
			},
			getList() {
				getPzServiceList({
					hospital_id: uni.getStorageSync('hospitalListItem').id,
					type: uni.getStorageSync('indexType').sx,
					page: this.page
				})
				.then(res => {
					const { code, data } = res
					if (code == 200001) {
						if (data.data.length == 0 || data.data.length < 10) {
							if (this.dataList.length == 0) {
								this.dataList = data.data
							} else {
								this.dataList = this.dataList.concat(data.data)
							}
							this.showMore = true
						} else {
							this.showMore = false
						}
						this.lastPage = data.last_page
					}
					this.peiListLoading = false
				})
				.catch(e => {
					this.peiListLoading = false
				})
			},
			handleScrolltolower() {
				if (this.page < this.lastPage) {
					this.page++
					this.getList()
					this.showMore = false
				} else {
					this.showMore = true
				}
			},
			handleHospitalDetail() {
				uni.setStorageSync('hospitalData', this.infoData)
				uni.navigateTo({
					url: '/pages/hospitalDetail/hospitalDetail'
				})
			},
			handleBack() {
				uni.navigateTo({
					url: '/pages/peizhen/peizhen'
				})
			},
			handleProductDetail(item) {
				uni.setStorageSync('productDetail', {
					url: '/pages/peiDetail/peiDetail',
					...item
				})
				uni.navigateTo({
					url: '/pages/productDetail/productDetail'
				})
			},
			handleDao() {
				wx.openLocation({
					latitude: this.infoData.lat * 1,
					longitude: this.infoData.lng * 1,
					scale: 16, // 缩放比例
					name: this.infoData.name,
					address: '', // 这个可能会影响地图的定位，所以可以选择不填
					success(data) {
						console.log(data)
					},
					fail(err) {
						console.log(err)
					}
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.pageView{
		background: #F4F4F4;
		height: 119vh;
		/deep/ .u-swiper-indicator {
			margin-bottom: 90rpx !important;
		}
		&-titleBlock{
			padding-left: 24rpx;
			position: absolute;
			z-index: 10000;
			top: 110rpx;
			display: flex;
			color: #fff;
			font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
			font-weight: normal;
			font-size: 36rpx;
			color: #FFFFFF;
			&-title{
				padding-left: 230rpx;
			}
		}
		.pageTopBlock{
			position: absolute;
			top: 390rpx;
			padding: 0px 32rpx;
			&-block{
				padding: 32rpx;
				width: 622rpx;
				height: 376rpx;
				background: #FFFFFF;
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				&-top{
					display: flex;
					align-items: center;
					&-img{
						width: 120rpx;
						height: 120rpx;
						background-color: #000;
						border-radius: 100% 100%;
					}
					&-right{
						padding-left: 24rpx;
						&-title{
							font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
							font-weight: normal;
							font-size: 36rpx;
							color: #222222;
						}
						&-content{
							display: flex;
							align-items: center;
							&-left{
								padding-right: 16rpx;
								font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
								font-weight: normal;
								font-size: 28rpx;
								color: #222222;
							}
							&-img{
								width: 28rpx;
								height: 28rpx;
							}
							&-right{
								font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
								font-weight: normal;
								font-size: 28rpx;
								color: #999999;
							}
						}
					}
				}
				&-middle{
					padding-top: 48rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					&-left{
						display: flex;
						align-items: center;
						&-img{
							width: 28rpx;
							height: 28rpx;
						}
						&-title{
							font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
							font-weight: normal;
							font-size: 28rpx;
							color: #333333;
						}
					}
					&-right{
						&-top{
							width: 48rpx;
							height: 48rpx;
						}
						&-content{
							padding-top: 8rpx;
							font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
							font-weight: normal;
							font-size: 26rpx;
							color: #999999;
						}
					}
				}
				&-bottom{
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding-top: 50rpx;
					&-left{
						display: flex;
						align-items: center;
						&-left{
							font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
							font-weight: normal;
							font-size: 28rpx;
							color: #333333;
						}
						&-right{
							font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
							font-weight: normal;
							font-size: 28rpx;
							color: #333333;
							width: 440rpx;
							white-space: nowrap; /* 不换行 */
							overflow: hidden; /* 隐藏超出的内容 */
							text-overflow: ellipsis; /* 用省略号表示被隐藏的部分 */
						}
					}
				}
			}
		}
		.serveBlock{
			position: absolute;
			padding: 24rpx;
			top: 830rpx;
			&-block{
				width: 686rpx;
				height: 1026rpx;
				background: #FFFFFF;
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				&-tab{
					padding: 32rpx 32rpx 0px 32rpx;
				}
				&-item{
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-top: 40rpx;
					&-img{
						width: 188rpx;
						height: 142rpx;
						border-radius: 16rpx;
					}
					&-middle{
						padding-left: 24rpx;
						&-title{
							font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
							font-weight: normal;
							font-size: 36rpx;
							color: #222222;
						}
						&-content{
							width: 282rpx;
							font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
							font-weight: normal;
							font-size: 28rpx;
							color: #999999;
							white-space: nowrap; /* 不换行 */
							overflow: hidden; /* 隐藏超出的内容 */
							text-overflow: ellipsis; /* 用省略号表示被隐藏的部分 */
						}
						&-priceBlock{
							display: flex;
							align-items: center;
							&-type{
								font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
								font-weight: normal;
								font-size: 28rpx;
								color: #E5432E;
							}
							&-num{
								font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
								font-weight: normal;
								font-size: 40rpx;
								color: #E5432E;
							}
							&-hou{
								font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
								font-weight: normal;
								font-size: 28rpx;
								color: #E5432E;
							}
							&-unit{
								padding-left: 12rpx;
								font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
								font-weight: normal;
								font-size: 28rpx;
								color: #222222;
							}
						}
					}
					&-button{
						display: flex;
						align-items: center;
						justify-content: center;
						width: 112rpx;
						height: 50rpx;
						background: #0165FB;
						border-radius: 60rpx 60rpx 60rpx 60rpx;
						font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
						font-weight: normal;
						font-size: 24rpx;
						color: #FFFFFF;
					}
				}
				&-font{
					text-align: center;
					font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
					font-weight: normal;
					font-size: 26rpx;
					color: #999999;
					padding-top: 20rpx
				}
			}
		}
	}
</style>